<template>
  <div class="contain">
    <div class="leftimg"></div>
    <div class="maincontain">
      <div class="top"></div>
      <el-card class="mainbox">
        <seacrh></seacrh>
        <div class="itemmainbox">
          <div class="classify">
            <div class="title">分类</div>
            <div v-for="item in category" :key='item.category_id' class="categoryitem">{{item.category_name  }}</div>
          </div>
          <scroll class="scroll"></scroll>
          <div class="classify">
            <div class="userbox">
              <el-avatar :size="80">
                {{ $store.state.user.userName }}
              </el-avatar>
              <div>
                <div style="margin: 0px 20px">Hi！</div>
                <div class="username">{{ $store.state.user.userName }}</div>
              </div>
            </div>

            <div class="numberbox">
              <div @click="$router.push('/shoppingCart')">
                <el-icon :size="30" class="number"><ShoppingCart /></el-icon>
                <div>购物车</div>
              </div>
              <div @click="$router.push('/starpage')">
                <el-icon :size="30" class="number"><Star /></el-icon>
                <div>收藏夹</div>
              </div>
              <div>
                <el-icon :size="30" class="number" @click="$router.push('/order')"><TakeawayBox /></el-icon>
                <div>订单</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="rightimg"></div>
  </div>
  <div class="recommendword">品牌推荐</div>
  <productshow></productshow>
</template>

<script setup>
import productshow from "../../components/productshow.vue";
import scroll from "../../components/scroll.vue";
import seacrh from "../../components/search/seacrh.vue";
import { ShoppingCart , Star ,TakeawayBox } from "@element-plus/icons-vue"; 
import {categoryApi } from '../../api/goods'
import {ref} from 'vue'
const category = ref('')
const getcategory = async()=>{
   let data =  await categoryApi()
   console.log(data)
   category.value = data.category
}
getcategory ()
</script>

<style scoped lang='less'>
.contain {
  display: flex;
  width: 100%;
  .maincontain{
    width: 100%;
    .mainbox {
    z-index: 999;
    padding: 20px;
  
    .itemmainbox {
      display: flex;
    }
    .classify {
      height: 500px;
      margin: 0 24px;

      font-size: 14px;
      background-color: #f7f9fa;
      width: 350px;
      border-radius: 12px;
   
      .categoryitem{
        margin: 15px;
        color: #666;
        
      }
     
      .title {
        padding: 16px 0 0 20px;
        font-size: 20px;
        /* margin: 20px; */
        text-align: left;
      }

      .userbox {
        display: flex;
        font-size: 25px;
        text-align: left;
        margin: 15px;
        .username {
          margin: 15px;
          font-size: 28px;
          font-weight: 600;
        }
      }
      .numberbox {
        display: flex;
        justify-content: space-around;
        margin: 20px;
        font-size: 18px;
        .number {
          font-size: 24px;
          color: #f40;
        }
      }
    }
  }

  .top {
    height: 120px;
    width: 100%;
    background-color: #e693b0;
  }
  }
  .leftimg {
    background: url("https://img.alicdn.com/imgextra/i2/O1CN01R33sEO28klrKZGtUN_!!6000000007971-2-tps-360-800.png")
      no-repeat;
    width: 300px;
    height: 1000px;
    z-index: 3;
  }
  .rightimg {
    background: url("https://img.alicdn.com/imgextra/i3/O1CN01P5XMnT1kQ7DSMGb4p_!!6000000004677-2-tps-360-800.png")
      no-repeat;
    width: 300px;
    height: 1000px;
    z-index: 3;
    top: -194.808px;
    left: 316px;
  }



}
.recommendword{
    font-size: 70px;
}
</style>